<template>
  <div>
    <el-table
    :data="list"
    border
    style="width: 100%">
    <el-table-column prop="date" label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
    <el-table-column prop="id" label="文章id" width="80"></el-table-column>
    <el-table-column prop="articleTitle" label="文章名称" width="80"></el-table-column>
    <el-table-column prop="userId" label="文章作者" width="80"></el-table-column>
    

    <el-table-column prop="createTime" label="添加时间" width="80"></el-table-column>
    
    <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
            
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deleteArticle(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
  </el-table>
  <el-pagination
  background
  layout="prev, pager, next,total,jumper"
  :total="total"
  :page-size="page"

  style="padding: 30px 0; text-align: center"
  :current-page="page"
  @current-change="getList">

  </el-pagination>
  </div>
</template>

<script>
import admin from '@/api/admin/admin.js'
  export default {
    data() {
      return {
        list:'',
        page:1,
        limit:3,
        total:0,
        
        BASE_API:process.env.BASE_API,
      }
    },
    created(){
      this.getList();
    },
    methods: {
      //根据用户id删除用户
      deleteArticle(id){
        
          
            admin.deleteCommunity(id)
                  .then(res=>{
                    if (response && response.code === 200) {
                alert("删除成功")
            }
                  })

      },
      getList(page=1){
        
        this.page=page;
        console.log(page)
        admin.getArticleList(this.current,this.page)
                .then(res=>{
          this.list = res.data.rows;
          this.total = res.data.total;
        })
       
      }
    },
  }
</script>